<%@ page contentType="text/html; charset=UTF-8"%>
<%@page import="itsm.isperp.framework.core.context.ContextHolder"%>
<link rel="stylesheet" href="js/libs/bootstrap/css/bootstrap.min.css">
<script type="text/javascript"
	src="js/libs/bootstrap/js/bootstrap.min.js?t=5"></script>
<script src="js/libs/echarts3/echarts.min.js"></script>
<script src="js/libs/echarts3/dark.js"></script>

<style type="text/css">
* {
	color: #fff;
	font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial,
		sans-serif;
}

body {
	background-color: #000;
	background-size: 100% 100%;
	
}


.col-sm-bg {
	background: url(img/screen/touming1.png) no-repeat;
	min-height: 230px;
	background-size: 100% 100%;
}

#table1 {
	width: 99%
}

h4 {
	font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial,
		sans-serif;
	font-size: 18px;
	padding: 4px 10px;
	color: #666;
	margin-top: 0;
	margin-bottom: 0
}

h4 label {
	border-bottom: 1px solid #fff;
	padding-bottom: 4px;
}

th {
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	padding: 10px 3px
}

td {
	padding: 2px 3px;
	font-size: 22px
}

.td1 {
	width: 50px;
	text-align: center;
}

.td2 {
	width: 450px;
	font-weight: 100;
	font-size: 18px;
	height: 54px;
}

.td3 {
	width: 280px;
	line-height: 100%;
}

.td4 {
	width: 60px;
	font-size: 16px
}

.td5 {
	width: 60px;
	text-align: center;
}

.td5 img {
	width: 28px;
	height: 28px;
}

.bar {
	float: left;
	background-color: #ffcc00;
	height: 18px;
	width: 0px;
	background-color: #ffcc00;
}

#bar0 {
	background-color: #ff6600;
	opacity: 1;
}

#bar1 {
	background-color: #ff6600;
	opacity: .95;
}

#bar2 {
	background-color: #ff6600;
	opacity: .9;
}

#bar3 {
	background-color: #ff6600;
	opacity: .85;
}

#bar4 {
	background-color: #ff6600;
	opacity: .80;
}

#bar5 {
	background-color: #ff6600;
	opacity: .75;
}

#bar6 {
	background-color: #ff6600;
	opacity: .70;
}

#bar7 {
	background-color: #ff6600;
	opacity: .65;
}

#bar8 {
	background-color: #ff6600;
	opacity: .60;
}

#bar9 {
	background-color: #ff6600;
	opacity: .55;
}

.addNum {
	float: left;
	padding: 1px 10px;
	color: #fff;
	font-weight: bold;
	font-size: 18px;
}

.number1,.number2,.number3,.number4,.number5,.number6,.number7,.number8,.number9,.number10
	{
	margin: 0 auto;
	width: 26px;
	height: 26px;
	background-color: #fff;
	border-radius: 13px;
	color: #000;
	line-height: 26px;
	font-size: 14px;
	font-weight: 700
}

.number1,.number2,.number3 {
	background-color: red;
	color: #fff
}

#table1 {
	width: 95%
}

.col-sm-7 {
	padding-right: 0;
	padding-left: 30px;
	width: 49%;
	margin-right: 10px;
}

.col-sm-5 {
	width: 49%;
}

.row {
	margin-top: 10px
}

.c_row {
	height: 210px
}

#c_row_1 {
	width: 50%
}

#c_row_2 {
	width: 14%;
	height: 210px;
	position: absolute;
	left: 50%;
	top: 0
}

#c_row_3 {
	width: 14%;
	height: 210px;
	position: absolute;
	left: 65%;;
	top: 0
}

#c_row_4 {
	width: 14%;
	height: 210px;
	position: absolute;
	left: 80%;;
	top: 0
}

.c_row1 {
	text-align: center;
	width: 21%;
	float: left;
	margin-left: 3px
}

#c_row_2 .c_row1,#c_row_3 .c_row1,#c_row_4 .c_row1 {
	width: 100%
}

.c_row2 {
	margin-top: 2px
}

.c_row11 {
	height: 60px;
	line-height: 60px;
	font-size: 35px;
	font-weight: 700;
}

.c_row12 {
	height: 25px;
	background: #404040;
	background-color: #1f58ad;
	font-size: 16px;
}

.c_row_important {
	color: #FFC000;
}

.top10_type,.knotop10_type {
	font-size: 20px;
	color: #888
}

.top10_type a,.knotop10_type a {
	color: #888;
	margin-right: 30px
}

.top10_active {
	font-weight: bold;
	color: #99FFFF !important
}

#chart2,#chart3,#chart4 {
	width: 29%;
	height: 185px;
}

#table2 th {
	padding: 5px 3px
}

.divMajor {
	color: red;
	border-bottom: 1px dashed red;
}

.lbMajorTitle {
	vertical-align: bottom;
	width: 300px;
	color: red;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lbMajorUser {
	color: red;
	width: 70px;
	text-align: center
}

.lbMajorDate {
	font-size: 14px;
	font-style: italic;
	color: #aaa
}

#login_frame .with-line {
	width: 570px;
	font-size: 40px;
	color: white;
	margin: 0 auto;
	position: relative;
	text-align: center
}

#login_frame .with-line:before {
	content: "";
	border-top: 1.5px solid #ededed;
	display: block;
	position: absolute;
	width: 60px;
	top: 25px;
	left: 0
}

#login_frame .with-line:after {
	content: "";
	border-top: 1.5px solid #ededed;
	display: block;
	position: absolute;
	width: 60px;
	top: 25px;
	right: 0
}

#main-cont-body {
	position: relative;
	min-height: 100%;
	width: 100%;
}

.col-sm-9 {
	width: 16%;
	height: 210px;
	margin: 4px;
	margin-top: 8px;
}

.bg-center {
	min-height: 260px;
}

.marquee {
	　　white-space: nowrap;
	　 　　overflow: -webkit-marquee;
	　　width: 170px;
	　　-webkit-marquee-direction: left;
	　　-webkit-marquee-speed: normal;
	　　-webkit-marquee-style: scroll;
	　　-webkit-marquee-repetition: 1;
}
html{
  overflow:hidden;
}
</style>

<div onclick="fullScreen()">
	<div id="login_frame">
		<div class="with-line"><%=ContextHolder.getConfigByKey("companyIntro")%></div>
	</div>
	<!-- <div
	style="text-align: center ;color:#E7000F;font-weight:400;margin:8px 0 5px;font-size: 40px">
	GTMC IT服务管理驾驶舱</div> -->
	<div style="padding:6px 6px 0 6px">
		<div class="row" style="margin-top:0px">
			<div class="col-sm-7 col-sm-bg">
				<div class="c_row " id="c_row_1">
					<h4>
						<label>事件控制台</label>
					</h4>
					<div class="c_row1">
						<div class="c_row11" id="i_assign">0</div>
						<div class="c_row12">待分派</div>
					</div>

					<div class="c_row1">
						<div class="c_row11" id="i_accept">0</div>
						<div class="c_row12">待受理</div>
					</div>
					<div class="c_row1">
						<div class="c_row11 c_row_important" id="i_handle">0</div>
						<div class="c_row12">待处理</div>
					</div>

					<!-- 	<div class="c_row1">
					<div class="c_row11 c_row_important" id="i_approval">0</div>
					<div class="c_row12">待审核</div>
				</div> -->
					<div style="clear:both;"></div>
					<div class="c_row1 c_row2">
						<div class="c_row11 " id="i_complaint">0</div>
						<div class="c_row12">待回访</div>
					</div>
					<div class="c_row1 c_row2">
						<div class="c_row11" id="i_handup">0</div>
						<div class="c_row12">挂起</div>
					</div>
					
					<div class="c_row1 c_row2">
						<div class="c_row11 c_row_important" id="i_vip">0</div>
						<div class="c_row12">VIP</div>
					</div>

					

				</div>
				<div class="c_row " id="c_row_2">

					<h4>
						<label style="text-align:center">问题</label>
					</h4>
					<div class="c_row1">
						<div class="c_row11" id="p_approval">0</div>
						<div class="c_row12">待审核</div>
					</div>

					<div class="c_row1 c_row2">
						<div class="c_row11" id="p_handle">0</div>
						<div class="c_row12">待实施</div>
					</div>
				</div>

				<div class="c_row " id="c_row_3">
					<h4>
						<label style="text-align:center">变更</label>
					</h4>

					<div class="c_row1">
						<div class="c_row11" id="c_approval">0</div>
						<div class="c_row12">待审核</div>
					</div>

					<div class="c_row1 c_row2">
						<div class="c_row11" id="c_handle">0</div>
						<div class="c_row12">待实施</div>
					</div>
				</div>

				<div class="c_row " id="c_row_4">
					<h4>
						<label style="text-align:center">发布</label>
					</h4>

					<div class="c_row1">
						<div class="c_row11" id="r_approval">0</div>
						<div class="c_row12">待审核</div>
					</div>

					<div class="c_row1 c_row2">
						<div class="c_row11" id="r_handle">0</div>
						<div class="c_row12">待实施</div>
					</div>
				</div>


			</div>
			<div class="col-sm-5 col-sm-bg"
				style="padding-right: 0;padding-left:0px">
				<h4 style="padding-left: 0">
					<label>本年度工单数趋势</label>
				</h4>
				<div id="chart1" style="width:100%;min-height:180px"></div>


			</div>
		</div>
		<div class="row">
			<div class="col-sm-7 col-sm-bg bg-center">
				<h4>
					<label>待处理事件排行榜（Top5）</label>
				</h4>
				<div style="padding-left:20px" class="top10_type">
					<!-- <a id="top10_1" class="top10_active" onclick="changeTop10(1)">按供应商</a> -->
					&nbsp;&nbsp;&nbsp;<a id="top10_1" onmouseover="changeTop10(1)">事件分类</a>&nbsp;&nbsp;&nbsp;<a
						id="top10_2" onmouseover="changeTop10(2)">项目分类</a>

				</div>

				<table id="table1">

					<tr class="tr0">
						<td class="td1"><div class="number1">1</div></td>
						<td class="td2"></td>
						<td class="td3"><div id="bar0" class="bar"></div>
							<div class="addNum"></div></td>
						<td class="td4"></td>
						<td class="td5"><img src='img/screen/arrow-no.png'>
						</td>


					</tr>
					<tr class="tr1">
						<td class="td1"><div class="number2">2</div></td>
						<td class="td2"></td>
						<td class="td3"><div id="bar1" class="bar"></div>
							<div class="addNum"></div></td>
						<td class="td4"></td>
						<td class="td5"><img src='img/screen/arrow-no.png'>
						</td>

					</tr>
					<tr class="tr2">
						<td class="td1"><div class="number3">3</div></td>
						<td class="td2"></td>
						<td class="td3"><div id="bar2" class="bar"></div>
							<div class="addNum"></div></td>
						<td class="td4"></td>
						<td class="td5"><img src='img/screen/arrow-no.png'>
						</td>

					</tr>
					<tr class="tr3">
						<td class="td1"><div class="number4">4</div></td>
						<td class="td2"></td>
						<td class="td3"><div id="bar3" class="bar"></div>
							<div class="addNum"></div></td>
						<td class="td4"></td>
						<td class="td5"><img src='img/screen/arrow-no.png'>
						</td>

					</tr>
					<tr class="tr4">
						<td class="td1"><div class="number5">5</div></td>
						<td class="td2"></td>
						<td class="td3"><div id="bar4" class="bar"></div>
							<div class="addNum"></div></td>
						<td class="td4"></td>
						<td class="td5"><img src='img/screen/arrow-no.png'>
						</td>

					</tr>
					<!--<tr class="tr5">
					<td class="td1"><div class="number6">6</div></td>
					<td class="td2"></td>
					<td class="td3"><div id="bar5" class="bar"></div>
						<div class="addNum"></div></td>
					<td class="td4"></td>
					<td class="td5"><img src='img/screen/arrow-no.png'>
					</td>
					
				</tr>
				<tr class="tr6">
					<td class="td1"><div class="number7">7</div>
						<div class="addNum"></div></td>
					<td class="td2"></td>
					<td class="td3"><div id="bar6" class="bar"></div>
						<div class="addNum"></div></td>
					<td class="td4"></td>
					<td class="td5"><img src='img/screen/arrow-no.png'>
					</td>
					
				</tr>
				<tr class="tr7">
					<td class="td1"><div class="number8">8</div></td>
					<td class="td2"></td>
					<td class="td3"><div id="bar7" class="bar"></div>
						<div class="addNum"></div></td>
					<td class="td4"></td>
					<td class="td5"><img src='img/screen/arrow-no.png'>
					</td>
					
				</tr>
				<tr class="tr8">
					<td class="td1"><div class="number9">9</div></td>
					<td class="td2"></td>
					<td class="td3"><div id="bar8" class="bar"></div>
						<div class="addNum"></div></td>
					<td class="td4"></td>
					<td class="td5"><img src='apps/sectShow/img/arrow-no1.png'>
					</td>
					
				</tr>
				<tr class="tr9">
					<td class="td1"><div class="number10">10</div></td>
					<td class="td2"></td>
					<td class="td3"><div id="bar9" class="bar">
							<div class="addNum"></div>
						</div></td>
					<td class="td4"></td>
					<td class="td5"><img src='img/screen/arrow-no.png'>
					</td>
					
				</tr> -->
				</table>
			</div>

			<div class="col-sm-5 col-sm-bg bg-center"
				style="padding-right: 0;padding-left:0px">
				<h4 style="padding-left: 0">
					<label>本年度新增知识统计（Top5）</label>
				</h4>
				<div style="padding-left:20px" class="knotop10_type">
					&nbsp;&nbsp;&nbsp;<a id="knotop10_2" onclick="changeKnoTop10(2)">分类统计</a>

				</div>

				<table id="table2">
					<!-- <tr>
						<th class="th1"><label>排名</label></th>
						<th class="th2"><label>姓名</label></th>
						<th class="th3"><label>总数对比</label></th>
						<th class="th4" style="text-align: left;"><label>统计</label></th>
					</tr> -->
					<tr class="tr0">
						<td class="td1"><div class="number1">1</div></td>
						<td class="td2"></td>
						<td class="td3"><div id="bar0" class="bar"></div>
							<div class="addNum"></div></td>
						<td class="td4"></td>

					</tr>
					<tr class="tr1">
						<td class="td1"><div class="number2">2</div></td>
						<td class="td2"></td>
						<td class="td3"><div id="bar1" class="bar"></div>
							<div class="addNum"></div></td>
						<td class="td4"></td>

					</tr>
					<tr class="tr2">
						<td class="td1"><div class="number3">3</div></td>
						<td class="td2"></td>
						<td class="td3"><div id="bar2" class="bar"></div>
							<div class="addNum"></div></td>
						<td class="td4"></td>

					</tr>
					<tr class="tr3">
						<td class="td1"><div class="number4">4</div></td>
						<td class="td2"></td>
						<td class="td3"><div id="bar3" class="bar"></div>
							<div class="addNum"></div></td>
						<td class="td4"></td>

					</tr>
					<tr class="tr4">
						<td class="td1"><div class="number5">5</div></td>
						<td class="td2"></td>
						<td class="td3"><div id="bar4" class="bar"></div>
							<div class="addNum"></div></td>
						<td class="td4"></td>

					</tr>
					<!-- 	<tr class="tr5">
					<td class="td1"><div class="number6">6</div></td>
					<td class="td2"></td>
					<td class="td3"><div id="bar5" class="bar"></div>
						<div class="addNum"></div></td>
					<td class="td4"></td>
					
				</tr>
				<tr class="tr6">
					<td class="td1"><div class="number7">7</div>
						<div class="addNum"></div></td>
					<td class="td2"></td>
					<td class="td3"><div id="bar6" class="bar"></div>
						<div class="addNum"></div></td>
					<td class="td4"></td>
					
				</tr>
				<tr class="tr7">
					<td class="td1"><div class="number8">8</div></td>
					<td class="td2"></td>
					<td class="td3"><div id="bar7" class="bar"></div>
						<div class="addNum"></div></td>
					<td class="td4"></td>
					
				</tr>
				<tr class="tr8">
					<td class="td1"><div class="number9">9</div></td>
					<td class="td2"></td>
					<td class="td3"><div id="bar8" class="bar"></div>
						<div class="addNum"></div></td>
					<td class="td4"></td>
					
				</tr>
				<tr class="tr9">
					<td class="td1"><div class="number10">10</div></td>
					<td class="td2"></td>
					<td class="td3"><div id="bar9" class="bar">
							<div class="addNum"></div>
						</div></td>
					<td class="td4"></td>
					
				</tr> -->
				</table>
			</div>
			<div style="width:100%;min-height:107px;height:auto"
				class="col-sm-9 col-sm-bg">
				<h4>
					<label>公告</label>
				</h4>
				<div>
					<marquee width="100%" behavior="scroll" direction="left"
						align="middle" style="font-size:20px;color:red">
						<div id="mqfont"></div>
					</marquee>
				</div>
			</div>
			<div class="col-sm-9 col-sm-bg" id="sssss" style="display:none">
				<h4>
					<label>成功关闭率</label>
				</h4>
				<div id="chart2" style="width:100%;min-height:180px"></div>
			</div>
			<div class="col-sm-9 col-sm-bg" style="display:none">
				<h4>
					<label>用户满意度</label>
				</h4>
				<div id="chart3" style="width:100%;min-height:180px"></div>
			</div>
			<div class="col-sm-9 col-sm-bg" style="display:none">
				<h4>
					<label>服务台解决率</label>
				</h4>
				<div id="chart4" style="width:100%;min-height:180px"></div>

			</div>
			<div class="col-sm-9 col-sm-bg" style="display:none">
				<h4>
					<label>变更成功率</label>
				</h4>
				<div id="chart5" style="width:100%;min-height:180px"></div>
			</div>
			<div class="col-sm-9 col-sm-bg" style="display:none">
				<h4>
					<label>发布成功率</label>
				</h4>
				<div id="chart6" style="width:100%;min-height:180px"></div>
			</div>
			<div class="col-sm-9 col-sm-bg" style="display:none">
				<h4>
					<label>问题解决率</label>
				</h4>
				<div id="chart7" style="width:100%;min-height:180px"></div>
			</div>

		</div>

	</div>
</div>

<script type="text/javascript">
   
   var screenStatus = "notfullscreen";
	function fullScreen() {
		if (screenStatus == "notfullscreen") {
			var docElm = document.documentElement;
			if (docElm.webkitRequestFullScreen) {
				docElm.webkitRequestFullScreen();
			}
			screenStatus = "fullscreen";
		} else if (screenStatus == "fullscreen") {
			exitfullScreen();
			screenStatus = "notfullscreen";
		}

	}
	function exitfullScreen() {
		if (document.exitFullscreen) {
			document.exitFullscreen();
		} else if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen();
		} else if (document.webkitCancelFullScreen) {
			document.webkitCancelFullScreen();
		} else if (document.msExitFullscreen) {
			document.msExitFullscreen();
		}
	}

	var totals = {};

	function htmlTrasfText(v) {
		v = v.replace(/(\n)/g, "");
		v = v.replace(/(\t)/g, "");
		v = v.replace(/(\r)/g, "");
		v = v.replace(/<\/?[^>]*>/g, "");
		v = v.replace(/\s*/g, "");
		v = v.replace(/(&nbsp;)/g, "");
		return v;

	}

	function reflashMaAnnounce() {
		$.ajax({
			url : 'announcement/announcement/getData',
			data : {
				rownum : '5'
			},
			success : function(data) {
				var str = "";
				if (data) {
					var leg = data.length;
					for ( var i = 0; i < leg; i++) {
						str += "【" + (i + 1) + "】." + data[i].title + htmlTrasfText(data[i].contents) + "    ";
					}
					$("#mqfont").text(str);

				}
			}
		});
	}

	function changeTotalText(eleId, newCount) {

		var $ele = $("#" + eleId);
		var ccount = 0;
		if (totals[eleId]) {
			var ccount = (newCount - totals[eleId]);
		} else {
			ccount = newCount;
		}

		$ele.stop().animate({
			text : ccount >= 0 ? "+=" + ccount : "-=" + ccount
		}, {
			duration : 5000,
			step : function(now, tween) {
				$ele.text(parseInt(now).toLocaleString());
			}
		});

	}

	function reflshTotals() {
		$.ajax({
			url : "screen/screen/totals",
			dataType : "json",
			async : false,
			success : function(data) {

				changeTotalText("i_assign", data.i_assign);
				changeTotalText("i_accept", data.i_accept);
				changeTotalText("i_handle", data.i_handle);
				changeTotalText("i_approval", data.i_approval);
				changeTotalText("i_handup", data.i_handup);
				changeTotalText("i_vip", data.i_vip);
				changeTotalText("i_complaint", data.i_complaint);

				changeTotalText("c_approval", data.c_approval);
				changeTotalText("c_handle", data.c_handle);
				changeTotalText("p_approval", data.p_approval);
				changeTotalText("p_handle", data.p_handle);
				changeTotalText("r_approval", data.r_approval);
				changeTotalText("r_handle", data.r_handle);
				totals = data;
			}
		});
	}

	function rowBarAdd(i, vcount, oldCount, tablename, count) {
		if (oldCount > 0) {
			$("#" + tablename + " .tr" + i + " .td3 .bar").css("width", vcount == 0 ? "1px" : ((vcount / count) * 100) + "%");
			if ((vcount - oldCount) > 0) {
				$("#" + tablename + " ." + i + " .td3 .addNum").html("+" + (vcount - oldCount));
				$("#" + tablename + " ." + i + " .td3 .addNum").fadeIn(100).fadeOut(3500);
			}
		}
	}

	function changeTop10(type) {
		$(".top10_type a").removeClass("top10_active");
		$("#top10_" + type).addClass("top10_active");
		$.ajax({
			url : "screen/screen/top10?type=" + type,
			dataType : "json",
			success : function(data) {
				$("#table1 .td2,#table1 .td4").text("");
				var count = 1;
				for ( var i = 0; i < data.length; i++) {
					count += data[i].count_t;
				}
				var countValue = 0;
				if (type == 1) {
					countValue = totals.i_assign + totals.i_accept +totals.i_handle  + totals.i_complaint + totals.i_handup;
				} else if (type == 2) {
					countValue = totals.i_assign + totals.i_accept+totals.i_handle + totals.i_complaint  + totals.i_handup;
				} else {
					countValue = totals.i_count;
				}
				for ( var i = 0; i < data.length; i++) {
					$("#table1 .tr" + i + " .td2").text(data[i].name);
					$("#table1 .tr" + i + " .td4").text(data[i].count_t);

					$("#table1 .tr" + i + " .td5").html((data[i].count_t / countValue * 100).toFixed(2) + "%");

					rowBarAdd(i, data[i].count_t, 1, "table1", count);
				}
			}
		});
	}

	function changeKnoTop10(type) {
		type = 2;
		$(".knotop10_type a").removeClass("top10_active");
		$("#knotop10_" + type).addClass("top10_active");
		$.ajax({
			url : "screen/screen/knotop10?type=" + type,
			dataType : "json",
			success : function(data) {
				$("#table2 .td2,#table2 .td4").text("");
				var count = 1;
				for ( var i = 0; i < data.length; i++) {
					count += data[i].count_t;
				}
				var countValue = 0;
				if (type == 1) {
					countValue = totals.i_accept + totals.i_handle;
				} else if (type == 2) {
					countValue = totals.i_assign + totals.i_accept + totals.i_approval + totals.i_approval + totals.i_handup;
				} else {
					countValue = totals.i_count;
				}

				for ( var i = 0; i < data.length; i++) {
					$("#table2 .tr" + i + " .td2").text(data[i].name);
					$("#table2 .tr" + i + " .td4").text(data[i].count_t);

					rowBarAdd(i, data[i].count_t, 1, "table2", count);
				}
			}
		});
	}

	/* function top10System() {
		$.ajax({
			url : "screen/screen/top10System",
			dataType : "json",
			success : function(data) {
				var count = 1;
				for ( var i = 0; i < data.length; i++) {
					count += data[i].count_t;
				}

				$("#table2 .td2,#table2 .td4").text("");
				for ( var i = 0; i < data.length; i++) {
					$("#table2 .tr" + i + " .td2").text(data[i].name);
					$("#table2 .tr" + i + " .td4").text(data[i].count_t);

					rowBarAdd(i, data[i].count_t, 1, "table2", count);
				}
			}
		});
	} */

	var top10Type = 1;

	function reflshTop10AndTotal() {
		reflshTotals();

		changeTop10(top10Type);
		changeKnoTop10(top10Type);
		if (top10Type == 2) {
			top10Type = 1;
		} else {
			top10Type = top10Type + 1;
		}
	}

	var sData1, sData2, sData3, xData = [];

	function reflshLineChart() {
		$.ajax({
			url : "screen/screen/dayOfMonthTotal",
			cache : false,
			dataType : 'json',
			async : false,
			success : function(data) {
				xData = data.date0;
				sData1 = data.data1;
				sData2 = data.data2;
				sData3 = data.data3;

				chart1.setOption({
					xAxis : {
						type : 'category',
						boundaryGap : false,
						data : xData
					},
					grid : {
						left : '3%',
						right : '5%',
						top : '5%',
						containLabel : true
					},
					yAxis : {
						type : 'value'
					},
					series : [ {
						name : "事件",
						type : 'line',
						data : sData1
					}, {
						name : "变更",
						type : 'line',
						data : sData2
					}, {
						name : "发布",
						type : 'line',
						data : sData3
					} ]
				});
			}
		});
	}

	function initLineChart() {
		option = {
			title : {
				show : false
			},
			legend : {
				show : true,
				data : [ '事件', '变更', '发布' ],
				textStyle : {
					color : '#fff'
				}
			},
			tooltip : {
				show : false
			},
			toolbox : {
				show : false
			},
			grid : {
				top : 5,
				left : 45,
				right : 10,
				bottom : 5
			},
			xAxis : {
				type : 'category',

				axisLabel : {
					textStyle : {
						color : '#fff',
						fontSize : 14
					}
				},

				data : []
			},
			yAxis : {
				type : 'value',
				splitLine : {
					show : true,
					type : 'dashed'
				},
				axisLabel : {
					textStyle : {
						color : '#fff',
						fontSize : 14
					}
				}
			},
			series : []
		};

		chart1.setOption(option);
	}

	function createPieOption(title) {
		return {
			/* "legend" : {
				"data" : [  ]
			}, */
			"series" : [ {
				"data" : [ {
					"value" : 0,
					"name" : ""
				} ],
				"type" : "pie",
				"radius" : "60%",
				"label" : {
					"normal" : {
						formatter : function(val) {
							return val.name.substring(0, 2) + "\n" + val.name.substring(2);
						}
					}
				},
				"labelLine" : {
					"normal" : {
						"length" : 7
					}
				},
				"color" : [ "#1AA3FF", "#fcce10", "#70EB89", "#FF3D3D" ],
			} ]
		};
	}

	/* function createGuageOption(title, v) {
		return {
			min : 0,
			max : 100,
			splitNumber : 11,
			title : {
				text : title,
				left : 'center',
				bottom : '0',
				textStyle : {
					fontSize : 15,
					color : '#fff'
				}
			},
			grid : {
				top : 0
			},
			toolbox : {
				show : false
			},
			series : [ {
				name : title,
				radius : '100%',
				type : 'gauge',
				axisLine : { // 坐标轴线
					lineStyle : { // 属性lineStyle控制线条样式
						width : 3,
						shadowBlur : 10
					}
				},
				axisLabel : { // 坐标轴小标记
					textStyle : { // 属性lineStyle控制线条样式
						fontWeight : 'bolder',
						color : '#fff',
						shadowBlur : 3
					}
				},
				axisTick : { // 坐标轴小标记
					length : 15, // 属性length控制线长
					lineStyle : { // 属性lineStyle控制线条样式
						color : 'auto'
					}
				},
				splitLine : { // 分隔线
					length : 25, // 属性length控制线长
					lineStyle : { // 属性lineStyle（详见lineStyle）控制线条样式
						width : 3,
						color : '#fff'
					}
				},
				pointer : { // 分隔线
					shadowColor : '#fff', //默认透明
					shadowBlur : 5
				},
				title : {
					show : true,
					text : title,
					textStyle : {
						fontWeight : 'bolder',
						fontSize : 14,
						shadowBlur : 10
					}
				},
				detail : {
					shadowBlur : 5,
					offsetCenter : [ 0, '50%' ], // x, y，单位px
					formatter : '{value}%'
				},
				data : {
					value : v
				}
			} ]
		};
	} */

	function initPieOption() {
		chart2.setOption(createPieOption("事件成功关闭数比率", 0));
		var data3=createPieOption("用户满意度", 0);
		chart3.setOption(createPieOption("用户满意度", 0));
		chart4.setOption(createPieOption("服务台解决率", 0));
		chart5.setOption(createPieOption("变更成功率", 0));
		chart6.setOption(createPieOption("发布成功率", 0));
		chart7.setOption(createPieOption("问题解决率", 0));
		reflashMaAnnounce();
	}

	function reflshPieChart() {
		var date_ = new Date();

		var year = date_.getFullYear();
		var month = date_.getMonth() + 1;
		var firstdate = year + '-' + '1' + '-01';
		//var firstdate = '2015' + '-' + '1' + '-01';

		var day = new Date(year, month, 0);
		var lastdate = year + '-' + month + '-' + day.getDate();
		$.ajax({
			url : "screen/screen/performance",
			dataType : "json",
			data : {
				"dtr1" : firstdate + "~" + lastdate
			},
			success : function(data) {
			
			   var option2=data.option2;
				option2.legend=null;
				if(option2.series[0].data.length==0)
				{
				   option2.series[0].data=[{"value":"1","name":"成功"}];
				}
				chart2.setOption(option2);
				var option3=data.option3;
				option3.legend=null;
				if(option3.series[0].data.length==0)
				{
				   option3.series[0].data=[{"value":"1","name":"成功"}];
				}
				chart3.setOption(data.option3);
				var option4=data.option4;
				option4.legend=null;
				if(option4.series[0].data.length==0)
				{
				   option4.series[0].data=[{"value":"1","name":"成功"}];
				}
				chart4.setOption(option4);
				
				var option6=data.option6;
				if(option6.series[0].data.length==0)
				{
				   option6.series[0].data=[{"value":"1","name":"成功"}];
				}
				option6.legend=null;
				chart6.setOption(option6);
				if(option6.series[0].data.length==0)
				{
				   option6.series[0].data=[{"value":"1","name":"成功"}];
				}
				var option7=data.option7;
				option7.legend=null;
				if(option7.series[0].data.length==0)
				{
				   option7.series[0].data=[{"value":"1","name":"成功"}];
				}
				chart7.setOption(option7);
				
				
				var option5=data.option5;
				option5.legend=null;
				chart5.setOption(option6);
				if(option5.series[0].data.length==0)
				{
				   option5.series[0].data=[{"value":"1","name":"成功"}];
				}
			}
		});
	}

	window.onresize = function() {
		chart1.resize();
		chart2.resize();
		chart3.resize();
		chart4.resize();
		chart5.resize();
		chart6.resize();
		chart7.resize();
	};

	/* function reflshGuageChart() {

		var date_ = new Date();

		var year = date_.getFullYear();
		var month = date_.getMonth() + 1;
		var firstdate = year + '-' + month + '-01';

		var day = new Date(year, month, 0);
		var lastdate = year + '-' + month + '-' + day.getDate();

		$.ajax({
			url : "screen/screen/performance",
			dataType : "json",
			data : {
				"dtr1" : firstdate + "~" + lastdate
			},
			success : function(data) {

				data.option2.series[0].axisLine.lineStyle.width = 3;
				data.option3.series[0].axisLine.lineStyle.width = 3;
				data.option4.series[0].axisLine.lineStyle.width = 3;

				chart2.setOption(data.option2);

				chart3.setOption(data.option3);

				chart4.setOption(data.option4);

			}
		});

	} */

	function reflshMargors() {

		$.ajax({
			url : "screen/screen/incidentMajorList",
			dataType : "json",
			success : function(data) {
				var str = "";
				$("#majorList").html("");
				for ( var i = 0; i < data.length; i++) {
					str += "<div class='divMajor'><label class='lbMajorUser'>" + data[i].confirmtimeman_name + "</label><label class='lbMajorTitle'>" + data[i].title + "</label><label class='lbMajorDate'>" + data[i].happen_time + "</label></div>";
				}

				$("#majorList").html(str);

			}
		});
	}

	var chart1 = echarts.init(document.getElementById("chart1"), 'dark');
	var chart2 = echarts.init(document.getElementById("chart2"), 'dark');
	var chart3 = echarts.init(document.getElementById("chart3"), 'dark');
	var chart4 = echarts.init(document.getElementById("chart4"), 'dark');
	var chart5 = echarts.init(document.getElementById("chart5"), 'dark');
	var chart6 = echarts.init(document.getElementById("chart6"), 'dark');
	var chart7 = echarts.init(document.getElementById("chart7"), 'dark');

	initLineChart();
	initPieOption();

	reflshTop10AndTotal();
	reflshPieChart();
	reflshLineChart();
	//reflshGuageChart();
	//reflshMargors();

	//top10System();

	setInterval(reflshTop10AndTotal, 10000);//30s 

	//setInterval(reflshGuageChart, 30000);//5m刷新绩效

	//setInterval(top10System, 1800000);//30min刷新系统排名

	setInterval(reflshLineChart, 3600000);//1h刷新本月请求
</script>